<template>
  <div class="PageContainer">
    <div class="nav">
      <div class="logoTop">
        <h1>Szy-UI</h1>
        <img src="./../assets/imgae/img2.jpg" alt="" />
      </div>
      <div class="navList"></div>
      <div class="logoBottom"></div>
    </div>
    <div class="content">
      <div class="float">
        <div class="topContainer">
          <img src="./../assets/imgae/img2.jpg" alt="" />
          <div class="right-container">
            <p>SZY-UI</p>
            <p>兴趣使然</p>
            <a class="button" href="https://gitee.com/shenzy98/szy-ui"
              >Gitee源码</a
            >
          </div>
        </div>
        <div class="bottomContainer">
          <div class="router" @click="ToDoc">点击开始探索</div>
          <div class="leftCon">
            <div class="subleftTop">
              <div class="vue">TypeScript</div>
              <div class="comAPI">源代码书写采用TypeScript</div>
            </div>
            <div class="subleftBottom">
              <div><img src="./../assets/imgae/logo.png" alt="" /></div>
            </div>
          </div>
          <div class="RightCon">
            <div class="subrightTop">
              <div><img src="./../assets/imgae/ts.png" alt="" /></div>
            </div>
            <div class="subrightBottom">
              <div class="vue">Vue 3</div>
              <div class="comAPI">使用Vue3 Composition API</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const Router = useRouter();
const ToDoc = () => {
  Router.push("/doc/button");
};
</script>

<style scoped lang="scss">
$bgcBlue: #514fdf;
$navGray: #000000;
@mixin flexCenterRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

@mixin flexCenterColumn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.PageContainer {
  height: 100vh;
  width: 100vw;
  @include flexCenterRow;
  .nav {
    // background-color: rgb(179, 204, 179);
    width: 15vw;
    height: 100vh;
    @include flexCenterColumn;
    .logoTop {
      color: white;
      padding-bottom: 20px;
      width: 25vw;
      height: 20vh;
      background-color: $navGray;
      @include flexCenterColumn;

      img {
        border-radius: 38px;
        margin-top: 10px;
        height: 100px;
        width: 180px;
      }
    }
    .navList {
      width: 20vw;
      height: 68vh;
      padding-top: 50px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      .subTitle {
        font-size: 24px;
        font-weight: 900;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 50px;
        width: 15vw;
        padding-left: 8px;
        background-color: rgb(231, 223, 223);
      }
      .routerLink {
        font-size: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 50px;
        width: 15vw;
        padding-left: 20px;
        background-color: rgb(231, 223, 223);
      }
    }
    .logoBottom {
      width: 20vw;
      height: 12vh;
      background-color: $navGray;
    }
  }
  .content {
    width: 85vw;
    height: 100vh;
    background-color: rgb(226, 226, 226);
    @include flexCenterColumn();
    .float {
      box-shadow: 15px 25px 20px 5px rgba(0, 0, 0, 0.5);
      background-color: rgb(255, 255, 255);
      height: 88%;
      width: 80vw;
      margin-left: -15%;
      .topContainer {
        @include flexCenterRow;
        color: #fff;
        font-size: 45px;
        font-weight: 600;
        margin-bottom: 2%;
        background-color: $bgcBlue;
        height: 35%;
        width: 100%;
        img {
          border-radius: 80px;
          height: 200px;
          margin-right: 60px;
          margin-left: -100px;
        }

        .right-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;

          .button {
            @include flexCenterRow;
            cursor: pointer;
            border-radius: 30px;
            height: 48px;
            width: 160px;
            margin-top: 20px;
            background-color: #fff;
            font-size: 24px;
            font-weight: 600;
            color: $bgcBlue;
          }
        }
      }
      .bottomContainer {
        @include flexCenterRow;
        height: 63%;
        width: 100%;
        .router {
          @include flexCenterRow;
          color: #fff;
          cursor: pointer;
          font-size: 35px;
          position: absolute;
          border-radius: 65px;
          height: 100px;
          width: 300px;
          background-color: rgb(3, 3, 3);
        }
        .leftCon {
          height: 100%;
          width: 50%;
          @include flexCenterColumn();
          .subleftTop {
            @include flexCenterColumn;
            height: 50%;
            width: 100%;
            background-color: $bgcBlue;
            color: #fff;
            .vue {
              font-size: 42px;
              margin-bottom: 15px;
            }
            .comAPI {
              font-size: 24px;
            }
          }
          .subleftBottom {
            @include flexCenterRow;
            height: 50%;
            width: 100%;
            background-color: rgb(255, 255, 255);
            overflow: hidden;
            img {
              height: 160px;
            }
          }
        }
        .RightCon {
          height: 100%;
          width: 50%;
          .subrightTop {
            @include flexCenterColumn();
            height: 50%;
            width: 100%;
            background-color: rgb(255, 255, 255);
            overflow: hidden;
            img {
              height: 90%;
            }
          }
          .subrightBottom {
            @include flexCenterColumn;
            height: 50%;
            width: 100%;
            color: #fff;
            background-color: rgb(78, 77, 77);
            .vue {
              font-size: 42px;
              margin-bottom: 15px;
            }
            .comAPI {
              font-size: 24px;
            }
          }
        }
      }
    }
  }
}
</style>
